<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./echarts.min.js"></script>
    <script src="./world.js"></script>
    <style>
        .box {
            width: 800px;
            height: 400px;
            border: 1px solid rgb(180, 248, 228);
        }
    </style>
</head>
<body> 
    <div class="box" style="width: 600px; height: 400px;"></div>
</body>
<!-- 1.启用一个服务，用http协议来访问
         2.script标签的type设置成module
     -->
<script type="module">
    import {dataMap} from  "./dataMap.js"
    import {nameMap} from "./nameMap.js"

    // 选择节点
    let dom = document.querySelector(".box")
    // 初始化
    let myChart = echarts.init(dom)
    let option={
        series: [
        {
            type:"map",   //   系列的类型
            mapType:"world",   //  地图类型
            data:dataMap,     //   各个国家肺炎感染数据
            nameMap:nameMap,    //    翻译国家名称（英文-->中文）
            // 鼠标没有悬浮时候样式
            itemStyle:{
                areaColor:"#dddffa"
            }
        }
        ],
        //   视图映射
        visualMap: {
        type:"piecewise",  //  切片效果
        itemWidth:50,  //  视图映射的宽度
        itemHeight:20,   //   视图映射的高度
        //  定制样式
        pieces:[
            {min:0,max:0,label:0,color:"#ffdeea"},
            {min:1,max:10,label:'1-10',color:"#e1dff8"},
            {min:10,max:20,label:'10-20',color:"#cfeffc"},
            {min:20,max:30,label:'20-30',color:"#ffffca"},
            {min:30,max:40,label:'30-40',color:"#d3ebfd"},
        ]
    },
    }

    myChart.setOption(option)

</script>
</html>